<template>
	<view>
			<!-- 搜索景点 -->
			<view class="search">
				<u-search v-model="searchKey" shape="square" @custom="searchScene" @search="searchScene" :action-style="{'color': '#fff'}"></u-search>
			</view>
			<!-- 选项栏 -->
			<view class="tab">
				<u-tabs active-color="#b22726" :bar-width="60" :list="tabList" :is-scroll="false" :current="current" @change="tabschange" :key="current"></u-tabs>
			</view>
		<scroll-view scroll-y="true" :style="{'height': this.$store.state.screenHeight - 46 + 'px'}" @scrolltolower="getMoreData" :scroll-top="scrollTop" @scroll="changeScrollTop">
			<!-- 景点介绍列表 -->
			<view class="travelResult">
				<u-empty mode="list" text="数据为空" v-show="(this.travelList.length == 0)" marginTop="240"></u-empty>
				<scene-list :list="travelList" v-show="(!this.isSearch)" :key="current"></scene-list>
				<scene-list :list="searchList" v-show="(this.isSearch)"></scene-list>
				</view>
			<view class="backTop" @click="backTop" v-show="(scrollTop > 300)">
				<u-icon size="40" name="arrow-upward"></u-icon>
			</view>
		</scroll-view>
	<!-- </view> -->
	<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { mapState} from 'vuex'
import SceneList from '../../components/scene.vue'

import { searchscenic, gethostscene, getclosescene } from '../../api/scenic.js'

export default {
	components: {
		SceneList,
	},
	data() {
		return {
			tabList: [],
			current: 0,
			travelList: [],
			searchList: [],
			scrollTop: 0,
			searchKey: '',
			isSearch: false,
			total: 0,
			searchTotal: 0,
			params: {
			  scenicName: '',
			  pageNum: 1,
			  pageSize: 8
			},
			closeParams: {
				mylongitude: '',
				mylatitude: '',
				userId: '',
				pageNum: 1,
				pageSize: 8
			},
			hotParams:{
			   city: '',
			   pageNum: 1,
			   pageSize: 8
			}
		};
	},
	watch: {
      searchKey (data) {
		 if (data === '') {
			 this.isSearch = false
			 this.hotParams.city = ''
			 this.params.scenicName = ''
			 if (this.current === 0) {
			 	this.getSceneList()
			 } else if(this.current === 1) {
			 	this.gethostScene()
			 } else if(this.current === 2){
			 	this.getcloseScene()
			 } else {
			 	this.getCityScene()
			 }
		 } 
	  }
	},
	computed: {
		...mapState(['locationCity', 'userinfo', 'address'])
	},
	mounted() {
	  this.getSceneList()
	},
	onShow() {
		this.tabList = [
			{name: '全部' }, {name: '热门'}, {name:  '最近' },{name: this.locationCity || '12'}
		]
	},
	created() {
		this.tabList = [
			{name: '全部' }, {name: '热门'}, {name:  '最近' },{name: this.locationCity || '12'}
		]
	},
	methods: {
		// 获取列表数据
		async getSceneList () {
			this.params =  {
			  scenicName: '',
			  pageNum: 1,
			  pageSize: 8
			}
		  const res = await searchscenic(this.params)
		  this.total = res.data.data.total
		  this.travelList = res.data.data.data
		},
		// 按热度对景区获取
		async gethostScene () {
			const res = await gethostscene(this.hotParams)
			this.travelList = res.data.data.data || []
		},
		// 获取当地城市的相关景区
		async getCityScene () {
			this.hotParams.city = this.locationCity
			const res = await gethostscene(this.hotParams)
			this.travelList = res.data.data.data || []
		},
		// 按距离对景区进行获取
		async getcloseScene () {
			if (!this.address.latitude && !this.address.longitude) {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						const params = {
							longitude: res.longitude || '',
							latitude:res.latitude || ''
						}
						this.$store.commit('setAdress', params)
					},
					error: (err) => {
						this.$refs.uToast.show({
							type: 'error',
				            position: 'top',
							title: '未获取地理位置'
						})
					}
				})
				
			} else {
				this.closeParams.mylongitude = this.address.longitude
				this.closeParams.mylatitude = this.address.latitude
				this.closeParams.userId = this.userinfo.userId || 13
				const res = await getclosescene(this.closeParams)
				this.total = res.data.data.total
				this.travelList = res.data.data.data || []
			}
		},
		// 搜索景点
		async searchScene () {
			this.params.scenicName = this.searchKey
			const res = await searchscenic(this.params)
			this.searchList = res.data.data.data || []
			this.searchTotal = res.data.data.total
			this.isSearch =  true
		},
		// tab选择的确认
		tabschange(e) {
			this.searchKey = ''
			this.hotParams.city = ''
			this.params.scenicName = ''
			this.params.pageNum =1
			this.searchList = []
			this.travelList = []
			this.current = e
			if (e === 0) {
				this.getSceneList()
			} else if(e === 1) {
				this.gethostScene()
			} else if(e === 2){
				this.getcloseScene()
			} else {
				this.getCityScene()
			}
		},
		// 改变scrollTop 
		changeScrollTop (e) {
			this.scrollTop = e.detail.scrollTop
		},
		// 放回顶部
		backTop () {
			this.scrollTop = 0
			uni.pageScrollTo({
			scrollTop: 0, //距离页面顶部的距离
			duration: 300
			});
		},
		// 获取更多距离的列表
		async getMoreDistance () {
			this.closeParams.pageNum =this.pageNum
			const res = await getclosescene(this.closeParams)
			this.travelList = [...this.travelList, ...rea.data.data.data]
		},
		// 触底加载下一页
		async getMoreData () {
			if (this.isSearch) {
				if (this.searchTotal > (this.params.pageNum *this.params.pageSize)) {
					this.params.scenicName = this.searchKey
					this.params.pageNum++
					const res  = await searchscenic(this.params)
					this.searchList = [ ...this.searchList, ...res.data.data.data,]
			}else {
				this.$refs.uToast.show({
				title: '没有更多数据了',
				position: 'top'
			})
				}
			} else {
				if ( this.total > (this.params.pageNum *this.params.pageSize)) {
					let res
					 this.params.pageNum++
					if (this.current == 2) {
						this.getMoreDistance()
					} else if (this.current == 1 || this.current == 3){
						this.hotParams.pageNum = this.params.pageNum
						 res  = await gethostscene(this.hotParams)	
					} else {
						 res  = await searchscenic(this.params)	
					}
					this.travelList = [ ...this.travelList,...res.data.data.data]
				} else {
					this.$refs.uToast.show({
						title: '没有更多数据了',
						position: 'top'
					})
				}
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
/* 景点筛选 */
.screen {
	z-index: 2000;
}
</style>
